<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <script src="vue.min.js"></script>
</head>
<body>
<div id="app" style="background-color: lightgreen;width: 800px;height: 400px;">
    <x @recivemsgfromx="recivemsgfromx"></x>
    <y :sendtoyfromroot="a"></y>
    <h1>绿色所处区域为root {{msg}}</h1>
</div>
</body>
<script>
    Vue.component('x', {
        template: '<div @click="senmsgfromxtoroot" style="background-color: orangered;color: #fff">{{x}}</div>',
        data: function () {
            return {
                x: 'x组件'
            }
        },
        methods: {
            senmsgfromxtoroot: function () {
                this.$emit('recivemsgfromx', this.x);
            }
        },
        computed: {},
        watch: {}
    });
    Vue.component('y', {
        template: '<div style="background-color: black;color: #fff">{{y}}--{{sendtoyfromroot}}</div>',
        data: function () {
            return {
                y: 'y组件'
            }
        },
        methods: {},
        computed: {},
        watch: {},
        props: ['sendtoyfromroot']
    });
    var app = new Vue({
        el: '#app',
        data: {
            msg: 'root初始值',
            a:'hello,world!'
        },
        methods: {
            recivemsgfromx: function (data) {
                console.log(data)
                this.msg = data;
                this.a = this.msg
            }
        },
        computed: {},
        watch: {}
    });
</script>
</html>